<template>
  <div class="wrapper" @click.prevent="bodyClick">
    <div class="header head-all" style="z-index: 800">
      <cmHeader id="1"></cmHeader>
    </div>
<div v-if="!iscompare">
  <div class="minWidth headerWrapper ">
    <div class="qureywrapper " >
      <ul>
        <li @click.stop="do_getSearchList" v-text='queryTarg'> </li>
        <li v-for="(item,index) in navSearchList" :key='index' v-text='item' v-show='getSearchList' @click.stop='def_getTarget(item)'>

        </li>

      </ul>
      <span class="input"><input type="text" placeholder="请输入你要搜索的内容" v-model="queryText"></span>
      <span class="icon f-zhong" @click="do_query"><img src="../../assets/Home/sousuo.png" alt="" ></span>
    </div>
  </div>
  <!--选择成果内容查询-->
  <div class="minWidth selectContent">
    <selectCGList @do_childQuery="do_childQuery($event)"></selectCGList>
  </div>
  <!--选择2-->
  <div class="minWidth selectContent-bottom">
    <ul class="flex">
      <li class="flex1 text-center relt" v-for="(item,index) in selectListL" :key="index" :class="selectOtherIndex==index?'selectOtherClass':''">
        <span v-text="item" @click.stop="do_selectOther(item,index)" ></span>
        <span class="iconfont icon-xiala" :class="IsDesc[index]?'xia':'shang'"></span>
      </li>
    </ul>


  </div>
  <div class="textMiddle minWidth f-bian"> <span>共有 <span style="color: #418DFD">{{number}}</span>个相关 </span>
    <div>
      <div v-show="compareNumber>0">
        <button class="btn btnClear" @click="do_compare('clear')">清除</button><button class=" btn btnCompare" @click="do_compare('compare')">比较 <span v-show="compareNumber>0">{{compareNumber}}</span></button>
      </div>
    </div>

  </div>
  <!--搜索详情-->
  <queryCollectList :needCompare="true" @do_compare="do_compare2($event)"></queryCollectList>
  <!--暂无资源-->
  <noData v-if="noDataShow"></noData>
  <!--分页-->
  <doPage @getCurPage="getCurPage($event)" :pages="pages"></doPage>
  <!--页脚-->
  <div class="foot ">
    <zcFooter></zcFooter>
  </div>
</div>
    <div v-if="iscompare">
      <compare :compareData="compareData"></compare>
    </div>
</div>

</template>

<script>
  import cmHeader from '../common/cm_header'
  import selectCGList from '../common/cm_selectCGList'
  import zcFooter from '../common/zcFooter'
  import queryCollectList from '../common/cm_query-collect'
  import compare from './yw_cgkCompare'
  import doPage from '../common/cm_doPage'
  import noData from '../common/cmNodata_model'
    export default {
      name: "yw_cgkQuery",
      inject: ['reload'],
      components: {
        cmHeader,
        selectCGList,
        zcFooter,
        queryCollectList,
        compare,
        doPage,
        noData

      },
      data() {
        return {
          noDataShow:false,
          compareData:[],//对比数据
          needCompare: true,
          iscompare: false,
          compareNumber:0,
          queryText: '',
          navSearchList: [],
          selectListL: [
            '发表时间', '点击数', '下载量', '用户评价'
          ],
          getSearchList: false,
          queryTarg: '',
          selectOtherIndex: '0',
          number:0,  //多少相关
          page:1,
          pages:0,
          IsDesc:[false,false,false,false],  //是否倒序
          queryStr:{}  //查询条件

        }
      },
      created() {
        try {
          let me = this;
          if (me.$route.query.condition) {
            me.queryTarg = me.$route.query.condition
          }
          if (me.$route.query.condition) {
            me.queryText = me.$route.query.queryText
          }
        } catch (e) {

        }
        this.get_selectList() //获取查询列表
        this.do_query()       //查询
        this.do_compare2()    //获取对比数据
      },
      methods: {
        bodyClick(){
          this.getSearchList=false
        },
        def_getQuery(){

        },
        do_compare2(item){
          let me = this;
          me.$ZcPublic.zcServer.Post({
            IsNeedLogin: 'true',
            Paras: {
              Name: 'Vue_resultLib',
              action: "get_CompleResultShow",
              Data: {}
            },
            Callback: me.cb_get_CompleResultShow,
            Scope: me,
          });
        },
        cb_get_CompleResultShow(resJson,scope){
          console.log("对比数据",resJson)
          if(resJson.success){
            this.compareNumber=resJson.data.length
             this.compareData=resJson.data
          }else {
            if(resJson.msg.indexOf('登录')==-1){
              this.$confirm({
                type:'错误',
                msg:resJson.msg,
                btn:{
                  ok:'ok'
                }
              })
            }

          }
        },
        do_getSearchList() {
          let me = this;
          me.getSearchList = !me.getSearchList
        },
        def_getTarget(item) {
          let me = this;
          me.queryTarg = item;
          me.getSearchList = !me.getSearchList
        },
        do_selectOther(item, index) {
          this.selectOtherIndex = index
          this.$set(this.IsDesc,index,!this.IsDesc[index])
          this.do_query()
          // console.log(this.IsDesc)
        },
        do_compare(item) {
          // alert(item)
          if (item === 'clear') {//清除VUEX里面的对比数据
           // this.$store.commit("removeCompareItems",'clearAll')

            let me = this;
            me.$ZcPublic.zcServer.Post({
              IsNeedLogin: 'false',
              Paras: {
                Name: 'Vue_resultLib',
                action: "doClearComple",
                Data: {}
              },
              Callback: me.cb_ClearComple,
              Scope: me,
            });
          } else if (item === "compare") {
            if(this.compareData.length<2){
              this.$confirm({
                style:'温馨提示',
                msg:'最少对比两个成果！',
                btn:{
                  ok:'ok'
                }
              })
            }else {
              this.iscompare = true
            }

          }
        },
        cb_ClearComple(resJson,scope){
          console.log('清除对比返回',resJson)
          if(!resJson.success){
            this.$confirm({
              type:"错误",
              msg:resJson.msg,
              btn:{
                ok:'ok'
              }
            })
          }else {
            this.reload()
          }
        },
        get_selectList() {//下拉选择列表
          let me = this;
          me.$ZcPublic.zcServer.Post({
            IsNeedLogin: 'false',
            Paras: {
              Name: 'Vue_resultLib',
              action: "getQueryTextModel_ResultShow",
              Data: {}
            },
            Callback: me.cb_get_selectList,
            Scope: me,
          });
        },
        cb_get_selectList(resJson, scoped) {
          console.log('下拉选择', resJson)
          if (resJson.success) {
            this.navSearchList = resJson.data
            if (this.queryTarg !== this.navSearchList[0] && this.queryTarg !== '') {
              return
            } else {
              this.queryTarg = this.navSearchList[0]
            }

          } else {
           this.$confirm({
             type:"错误",
             msg:resJson.msg,
             btn:{
               ok:'ok'
             }
           })
          }
        },
        do_queryCommon(){
          let me = this;
          me.$ZcPublic.zcServer.Post({
            IsNeedLogin: 'false',
            Paras: {
              Name: 'Vue_resultLib',
              action: "getResultShowByQuery",
              Data: {
                Page: me.page,
                QueryStr: me.queryStr
              }
            },
            Callback: me.cb_do_query,
            Scope: me,
          });
        },
        do_query() {//查询ajax
          //getResultShowByQuery
          console.log('条件');
          let queryStr = {};   //选择条件
          console.log(this.getQueryStr)
          this.getQueryStr.forEach((item, index) => {
            let _arr = [];
            item.name.forEach((itemName, index2) => {
              if (itemName.select) {
                _arr.push(itemName.text)
              }
              let _arrString = _arr.join();
              switch (item.title) {

                case "成果分类":  //ResultModel
                  if (_arrString.indexOf("全部") >= 0) {
                    queryStr.ResultModel = ''
                  } else {
                    queryStr.ResultModel = _arrString
                  }
                  break;
                case "成果范围":  //TopticType
                  if (_arrString.indexOf("全部") >= 0) {
                    queryStr.TopticType = ''
                  } else {
                    queryStr.TopticType = _arrString
                  }
                  break;
                case "获奖类别":   //LevelType
                  if (_arrString.indexOf("全部") >= 0) {
                    queryStr.LevelType = ''
                  } else {
                    queryStr.LevelType = _arrString
                  }
                  break;
                case "获奖等级":   //GrandLevel
                  if (_arrString.indexOf("全部") >= 0) {
                    queryStr.GradeLevel = ''
                  } else {
                    queryStr.GradeLevel = _arrString
                  }
                  break;
                case "届数":       //YearCode
                  if (_arrString.indexOf("全部") >= 0) {
                    queryStr.YearCode = ''
                  } else {
                    queryStr.YearCode = _arrString
                  }
                  break;
                case "学科":       //Subject
                  if (_arrString.indexOf("全部") >= 0) {
                    queryStr.Subject = ''
                  } else {
                    queryStr.Subject = _arrString
                  }
                  break;
                case "学段":       //LearnStage
                  if (_arrString.indexOf("全部") >= 0) {
                    queryStr.LearnStage = ''
                  } else {
                    queryStr.LearnStage = _arrString
                  }
                  break;
              }
            })
          });
          // queryStr.QueryKey = this.queryTarg;  //下拉选择条件
          queryStr.QueryKey = this.queryText;  //输入框选择
          queryStr.QueryKeyModel = this.queryTarg;  //输入框选择
          queryStr.OrderByStr = this.selectListL[this.selectOtherIndex];  //排序方式
          queryStr.IsDesc = this.IsDesc[this.selectOtherIndex];  //是否倒序
          queryStr.PageNum = 6;  //查询几条数据
          this.queryStr=queryStr
          this.do_queryCommon()
        },
        cb_do_query(resJson, scoped) {
          console.log('查询结果', resJson)
          if(resJson.success){
            this.number=resJson.data.AllDataNumber
            if(resJson.data.Data.length>0){
              resJson.data.Data.forEach((item,index)=>{
                this.$set(item,"selected",false)
              })
              this.noDataShow=false
            }else {
              this.noDataShow=true
            }
            this.$store.commit("setQueryData",resJson.data)
            this.pages = resJson.data.Pages;
            this.page = resJson.data.crPage;
          }else {
            this.$confirm({
              type:'错误',
              msg:resJson.msg,
              btn:{
                ok:"ok"
              }
            })
          }
        },
        getCurPage(item){//分页组件传过来页数
          this.page=item
          this.do_queryCommon()
          window.scrollTo(0,0)
        },
        do_childQuery(item){  //子组件条件查询
          // alert(44)
          this.do_query()
        },
      },
      computed: {
        getQueryStr() {
          return this.$store.getters.getQueryStr
        },
        getCompareData(){
          return this.$store.getters.getCompareData
        }
      },
      mounted() {
        // try {
        //   let me = this;
        //   if (me.$route.query.condition) {
        //     me.queryTarg = me.$route.query.condition
        //   }
        //   if (me.$route.query.condition) {
        //     me.queryText = me.$route.query.queryText
        //   }
        // } catch (e) {
        //
        // }
      }

    }
</script>

<style scoped>
  .wrapper{
  background-color: rgba(242, 242, 243, 1)
  }

  .headerWrapper .qureywrapper{
    flex:1;
    height:40px;
    line-height: 40px;
    margin-top:20px;
    position: relative;
    background-color: white;
  }
  ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .headerWrapper .qureywrapper *{
    float:left
  }
  .headerWrapper .qureywrapper ul{
    width: 120px;
    height: 40px;
    line-height: 40px;
    position: relative;
    z-index: 500;
  }
  .headerWrapper .qureywrapper ul li{
    border: 1px solid gainsboro;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border-top: none;
    background-color: white;
  }
  .headerWrapper .qureywrapper ul li:first-child, .headerWrapper .qureywrapper ul li:first-child:hover{
    border: none;
    left:0;
    background: url('../../assets/Home/xiala.png') 91%  no-repeat ;
    background-size: 11px 8px;
    position: relative;
    z-index: 999;
    color: black;
  }
  .headerWrapper .qureywrapper ul li:nth-of-type(2){
    border-top: 1px solid gainsboro;
  }
  .headerWrapper .qureywrapper ul li:first-child:after{
    content: '';
    position: absolute;
    height: 26px;
    width: 1px;
    background-color: #b7b7b7;
    right: 0;
    margin-top: 7px;
  }
  .headerWrapper .qureywrapper ul li:hover{
    background: #418EFD;
    color: white;
  }

  .headerWrapper .qureywrapper .input{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 120px;
    right: 50px;
  }
  .headerWrapper .qureywrapper .input input{
    padding-left: 11px;
    width: 100%;
    height: 40px;
    display: inline-block;
    border: none;
    outline: none
  }
  .icon{
    width: 80px;
    position: absolute;
    right: 0;
    height:40px;
    background: #418EFD;
    color: white;
    text-align: center;
    cursor: pointer;
  }
  .icon img{
    width: 26px;
    height: 26px;
  }
  .selectContent,.header{
    background-color: white;
  }
.selectContent-bottom{
  background-color: white;
  height: 40px;
  line-height: 40px;
}
  .selectContent-bottom li span{
    cursor: pointer;
  }
  .icon-xiala{
    font-size: 12px;
    margin-left: 3px;
  }
  .shang{
    transform: rotate(180deg) !important;
  }
  .selectOtherClass{
    color: #418EFD;
  }
.btn{
  position: relative;
  height: 25px;
  padding: 0 15px;
  box-sizing: border-box;
  margin-right: 10px;
  border-radius: 3px;
}
  .btn span{
    position: absolute;
    width: 14px;
    height: 14px;
    line-height: 14px;
    border-radius: 50%;
    background-color: red;
    color: white;
    right: -5px;
    top: -5px;
  }
.btnClear{
  background-color: white;
  color: #418EFD;
  border: 1px solid #418EFD;
}
  .btnCompare{
    background-color: #418EFD;
    color: white;
  }


.zindex{
  z-index: 9999!important;
}
</style>
